<template>
  <div>
    <el-dialog
      title="添加达人"
      width="600px"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <div class="dialogBody">
        <el-form
          :model="params"
          ref="ruleForm"
          label-position="right"
          label-width="100px"
          size="small"
        >
          <div class="lineTitle">
            <div class="line"></div>
            <span>人员信息</span>
          </div>
          <div class="padContent">
            <el-form-item label="选择人员：" prop="uid">
              <el-autocomplete
                popper-class="my-autocomplete"
                v-model="params.userName"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入"
                @select="handleSelect"
              >
                <template slot-scope="{ item }">
                  <div v-if="item.id == -1">无匹配结果</div>
                  <div v-else>
                    <div class="name">{{ item.userName }}</div>
                  </div>
                </template>
              </el-autocomplete>
            </el-form-item>
            <div class="userInfo" v-if="infoShow">
              <el-form-item label="手机号：">
                <el-input disabled v-model="userInfo.mobile"></el-input>
              </el-form-item>
              <!-- <el-form-item label="年龄：">
                <el-input disabled v-model="userInfo.age"></el-input>
              </el-form-item> -->
              <el-form-item label="性别：">
                <el-input
                  disabled
                  v-model="userInfo.sex == 1 ? '男' : '女'"
                ></el-input>
              </el-form-item>
              <!-- <el-form-item label="身份证号：">
                <el-input disabled v-model="userInfo.idNo"></el-input>
              </el-form-item> -->
              <!-- <el-form-item label="身份：">
                <el-input disabled v-model="userInfo.type"></el-input>
              </el-form-item> -->
              <!-- <el-form-item label="住址：">
                <el-input disabled v-model="userInfo.house.name"></el-input>
              </el-form-item> -->
            </div>
          </div>
          <div class="lineTitle">
            <div class="line"></div>
            <span>人员信息</span>
          </div>
          <div class="padContent">
            <div v-for="(item, index) in params.personList">
              <el-form-item
                label="专业技能："
                :prop="'personList.' + index + '.skill'"
                :rules="{
                  required: true,
                  message: '请选择专业技能',
                  trigger: 'change',
                }"
              >
                <el-select v-model="item.skill" placeholder="请选择技能">
                  <el-option label="技能1" value="1"> </el-option>
                  <el-option label="技能1" value="2"> </el-option>
                  <el-option label="技能1" value="3"> </el-option>
                </el-select>
                <el-button
                  v-show="index != 0"
                  style="margin-left: 20px; padding: 6px"
                  size="mini"
                  icon="el-icon-delete"
                  type="danger"
                  @click="editSkill(index)"
                  >删除技能</el-button
                >
              </el-form-item>
              <el-form-item label="上传资质证明或证书：">
                <template slot="">
                  <div @click="getIndex(index)">
                    <UploadPhoto
                      @onSuccess="onSuccess"
                      :fileList="item.pic"
                    ></UploadPhoto>
                  </div>
                </template>
              </el-form-item>
              <el-form-item label="认证补充：">
                <el-input
                  v-model="item.desc"
                  type="textarea"
                  :autosize="{ minRows: 4 }"
                  size="small"
                ></el-input>
              </el-form-item>
            </div>
            <el-button
              style="margin-left: 100px; padding: 6px"
              size="mini"
              icon="el-icon-plus"
              type="primary"
              @click="addSkill(index)"
              >添加技能</el-button
            >
          </div>
          <el-divider></el-divider>
          <div class="padContent">
            <el-form-item label="达人简介：">
              <el-input
                v-model="params.introduction"
                type="textarea"
                :autosize="{ minRows: 4 }"
                size="small"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UploadPhoto from "@/components/UploadPhoto.vue";
import { skillList, checkUserSkill, talentAdd } from "@/api/talent";

import { addClub, editClub } from "@/api/club.js";
import { userList } from "@/api/activity.js";

export default {
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      params: {
        name: "",
        introduction: "",
        pic: [],
        userName: "",
        uid: "",
        personList: [
          {
            skill: "",
            pic: [],
            desc: "",
          },
        ],
      },
      skillListData: [],
      userInfo: {
        house: {},
      },
      infoShow: false,
      // rules: {
      //   name: [{ required: true, message: "请输入社团名称", trigger: "blur" }],
      //   introduction: [
      //     { required: true, message: "请输入社团介绍", trigger: "blur" },
      //   ],
      //   pic: [{ required: true, message: "请上传封面", trigger: "change" }],
      //   uid: [{ required: true, message: "请选择社长姓名", trigger: "change" }],
      // },
      userInfo: {
        house: {},
      },
      infoShow: false,
      curIndex: 0,
    };
  },

  components: {
    UploadPhoto,
  },

  computed: {},

  beforeMount() {},

  mounted() {
    if (this.clubId) {
      this.getInfo();
    }
  },

  methods: {
    getSkillList() {
      skillList().then((res) => {
        if (res.code == 200) {
          console.log(res.data, "llllllllllllll-----");
        }
      });
    },
    getInfo() {
      editClub({ id: this.clubId }).then((res) => {
        if (res.code == 200) {
          this.params.name = res.data.name;
          this.params.introduction = res.data.introduction;
          this.params.userName = res.data.userName;
          this.params.uid = res.data.organizer_uid;
          this.params.pic = res.data.pic.split(",").map((item) => {
            return {
              name: "",
              url: item,
            };
          });
        }
      });
    },
    getIndex(index) {
      this.curIndex = index;
    },
    //获取上传的图片地址
    onSuccess(val) {
      this.params.personList[this.curIndex].pic = val;
    },

    async querySearchAsync(queryString, cb) {
      if (queryString && queryString.length > 0) {
        this.input = queryString;
        try {
          const data = await userList({
            keywords: this.params.userName,
          }); //search定义在data里
          console.log(data);
          // 赋值给建议列表，渲染到页面
          let list = data.data;
          // 如果list.length等于0，则代表没有匹配到结果。手动给list添加一条提示信息
          if (list.length == "0") {
            list.push({
              id: "-1",
              value: "无匹配结果",
            });
            // 调用 callback 返回建议列表的数据
            cb(list);
          } else {
            // list = list.map((item) => {
            //   return {
            //     value: `${item.userName}`,
            //     id: `${item.id}`,
            //   };
            // });
            // 调用 callback 返回建议列表的数据
            cb(list);
          }
        } catch (error) {
          console.log(error);
        }
      } else {
        cb([]);
      }
    },
    handleSelect(val) {
      console.log(val, "))))");
      this.params.userName = val.userName;
      this.params.uid = val.id;
      this.userInfo = val;
      this.infoShow = true;
    },
    addSkill(index) {
      this.params.personList.push({
        skill: "",
        pic: "",
        desc: "",
      });
    },
    editSkill(index) {
      this.params.personList.splice(index, 1);
    },
    onSubmit(formName) {
      console.log(this.params);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //处理提交字段
          let params = {
            ...this.params,
          };
          console.log(this.params.pic);
          if (this.params.pic.length > 0) {
            params.pic = this.params.pic.map((item) => item.url).join(",");
          }
          //删除不必传入的字段
          delete params.userName;
          if (this.clubId) {
            //修改
            editClub(params).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.$emit("handleClose", true);
              }
            });
          } else {
            //新增
            addClub(params).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.$emit("handleClose", true);
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose() {
      this.$emit("handleClose");
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.dialogBody {
  /deep/.padContent {
    margin-top: 10px;
    padding-left: 60px;
    .el-input__inner {
      width: 300px;
    }
    .el-textarea {
      width: 300px;
    }
  }
}
</style>
